<template>
    <div class="resources-container">
      <div class="page-header">
        <h1>学习资源</h1>
        <p>海量优质学习资源，助力学习提升</p>
      </div>
      
      <div class="resources-content">
        <div class="resources-sidebar">
          <div class="sidebar-header">
            <h3>资源分类</h3>
          </div>
          
          <el-menu
            :default-active="currentCategory"
            class="category-menu"
            @select="handleCategorySelect"
          >
            <el-menu-item v-for="category in categories" :key="category.id" :index="category.id.toString()">
              <el-icon><component :is="category.icon" /></el-icon>
              <span>{{ category.name }}</span>
            </el-menu-item>
          </el-menu>
        </div>
        
        <div class="resources-main">
          <div class="resources-filters">
            <div class="search-box">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索资源..."
                prefix-icon="Search"
                clearable
                @input="handleSearch"
              ></el-input>
            </div>
            
            <div class="filter-options">
              <el-select v-model="formatFilter" placeholder="格式" clearable>
                <el-option v-for="format in formats" :key="format.value" :label="format.label" :value="format.value"></el-option>
              </el-select>
              
              <el-select v-model="sortOption" placeholder="排序">
                <el-option label="最新上传" value="recent"></el-option>
                <el-option label="下载最多" value="downloads"></el-option>
                <el-option label="评分最高" value="rating"></el-option>
              </el-select>
            </div>
          </div>
          
          <div class="resources-list" v-if="filteredResources.length > 0">
            <el-card 
              v-for="(resource, index) in filteredResources" 
              :key="index"
              class="resource-card"
              shadow="hover"
              @click="viewResourceDetail(resource)"
            >
              <div class="card-main-content">
                <div class="resource-icon">
                  <el-icon v-if="resource.format === 'pdf'"><Document /></el-icon>
                  <el-icon v-else-if="resource.format === 'doc'"><Notebook /></el-icon>
                  <el-icon v-else-if="resource.format === 'ppt'"><PieChart /></el-icon>
                  <el-icon v-else-if="resource.format === 'video'"><VideoPlay /></el-icon>
                  <el-icon v-else-if="resource.format === 'audio'"><Headset /></el-icon>
                  <el-icon v-else><Files /></el-icon>
                </div>
                
                <div class="resource-info">
                  <div class="resource-title">{{ resource.title }}</div>
                  <div class="resource-description">{{ resource.description }}</div>
                  <div class="resource-meta">
                    <span class="resource-format">{{ getFormatLabel(resource.format) }}</span>
                    <span class="resource-size">{{ formatFileSize(resource.size) }}</span>
                    <span class="resource-date">{{ resource.uploadDate }}</span>
                  </div>
                  <div class="resource-stats">
                    <div class="resource-rating">
                      <el-rate v-model="resource.rating" disabled text-color="#ff9900" :size="14" />
                      <span class="rating-count">({{ resource.ratingCount }})</span>
                    </div>
                    <div class="resource-downloads">
                      <el-icon><Download /></el-icon>
                      <span>{{ resource.downloads }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="resource-actions">
                <el-button type="primary" size="small" @click.stop="downloadResource(resource)">
                  <el-icon><Download /></el-icon> 下载
                </el-button>
                <el-button type="info" size="small" @click.stop="previewResource(resource)" v-if="canPreview(resource)">
                  <el-icon><View /></el-icon> 预览
                </el-button>
              </div>
            </el-card>
          </div>
          
          <div class="empty-resources" v-else>
            <el-empty description="暂无相关资源"></el-empty>
          </div>
          
          <div class="pagination-container" v-if="filteredResources.length > 0">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="totalResources"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </div>
      </div>
      
      <!-- 资源详情对话框 -->
      <el-dialog
        v-model="resourceDetailVisible"
        :title="selectedResource ? selectedResource.title : ''"
        width="700px"
        v-if="selectedResource"
      >
        <div class="resource-detail">
          <div class="detail-header">
            <div class="detail-info">
              <h3>{{ selectedResource.title }}</h3>
              <div class="detail-meta">
                <span>格式: {{ getFormatLabel(selectedResource.format) }}</span>
                <span>大小: {{ formatFileSize(selectedResource.size) }}</span>
                <span>上传时间: {{ selectedResource.uploadDate }}</span>
                <span>上传者: {{ selectedResource.uploader }}</span>
              </div>
            </div>
          </div>
          
          <div class="detail-description">
            <h4>资源描述</h4>
            <p>{{ selectedResource.description }}</p>
          </div>
          
          <div class="detail-preview" v-if="canPreview(selectedResource)">
            <h4>资源预览</h4>
            <div class="preview-container">
              <!-- 根据资源类型显示不同的预览 -->
              <div v-if="selectedResource.format === 'pdf'" class="pdf-preview">
                <!-- PDF预览组件 -->
                <div class="preview-placeholder">
                  <el-icon><Document /></el-icon>
                  <span>PDF预览</span>
                </div>
              </div>
              <div v-else-if="selectedResource.format === 'video'" class="video-preview">
                <!-- 视频预览组件 -->
                <div class="preview-placeholder">
                  <el-icon><VideoPlay /></el-icon>
                  <span>视频预览</span>
                </div>
              </div>
              <div v-else class="generic-preview">
                <div class="preview-placeholder">
                  <el-icon><Files /></el-icon>
                  <span>预览不可用</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="detail-stats">
            <div class="stats-item">
              <div class="stats-label">下载次数</div>
              <div class="stats-value">{{ selectedResource.downloads }}</div>
            </div>
            <div class="stats-item">
              <div class="stats-label">评分</div>
              <div class="stats-rating">
                <el-rate v-model="selectedResource.rating" disabled text-color="#ff9900" :size="16" />
                <span>({{ selectedResource.ratingCount }})</span>
              </div>
            </div>
            <div class="stats-item">
              <div class="stats-label">收藏数</div>
              <div class="stats-value">{{ selectedResource.favorites }}</div>
            </div>
          </div>
          
          <div class="detail-tags" v-if="selectedResource.tags && selectedResource.tags.length">
            <h4>标签</h4>
            <div class="tags-list">
              <el-tag
                v-for="tag in selectedResource.tags"
                :key="tag"
                size="small"
                effect="plain"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          
          <div class="detail-related" v-if="relatedResources.length">
            <h4>相关资源</h4>
            <div class="related-list">
              <div 
                v-for="(related, index) in relatedResources" 
                :key="index"
                class="related-item"
                @click="viewResourceDetail(related)"
              >
                <div class="related-icon">
                  <el-icon v-if="related.format === 'pdf'"><Document /></el-icon>
                  <el-icon v-else-if="related.format === 'doc'"><Notebook /></el-icon>
                  <el-icon v-else-if="related.format === 'ppt'"><PieChart /></el-icon>
                  <el-icon v-else-if="related.format === 'video'"><VideoPlay /></el-icon>
                  <el-icon v-else-if="related.format === 'audio'"><Headset /></el-icon>
                  <el-icon v-else><Files /></el-icon>
                </div>
                <div class="related-info">
                  <div class="related-title">{{ related.title }}</div>
                  <div class="related-meta">
                    <span>{{ getFormatLabel(related.format) }}</span>
                    <span>{{ formatFileSize(related.size) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="detail-actions">
            <el-button type="primary" @click="downloadResource(selectedResource)">
              <el-icon><Download /></el-icon> 下载资源
            </el-button>
            <el-button type="success" @click="collectResource(selectedResource)">
              <el-icon><Star /></el-icon> 收藏资源
            </el-button>
            <el-button type="info" @click="rateResource">
              <el-icon><StarFilled /></el-icon> 评分
            </el-button>
          </div>
        </div>
        
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="resourceDetailVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
      
      <!-- 预览对话框 -->
      <el-dialog
        v-model="previewVisible"
        :title="resourceToPreview ? resourceToPreview.title + ' - 预览' : '资源预览'"
        width="800px"
        v-if="resourceToPreview"
      >
        <div class="resource-preview-container">
          <!-- 根据资源类型显示不同的预览 -->
          <div v-if="resourceToPreview.format === 'pdf'" class="pdf-preview-full">
            <!-- PDF预览组件 -->
            <div class="preview-placeholder">
              <el-icon><Document /></el-icon>
              <span>PDF预览</span>
            </div>
          </div>
          <div v-else-if="resourceToPreview.format === 'video'" class="video-preview-full">
            <!-- 视频预览组件 -->
            <div class="preview-placeholder">
              <el-icon><VideoPlay /></el-icon>
              <span>视频预览</span>
            </div>
          </div>
          <div v-else class="generic-preview-full">
            <div class="preview-placeholder">
              <el-icon><Files /></el-icon>
              <span>预览不可用</span>
            </div>
          </div>
        </div>
      </el-dialog>
      
      <!-- 评分对话框 -->
      <el-dialog
        v-model="ratingDialogVisible"
        title="为资源评分"
        width="400px"
      >
        <div class="rating-dialog-content">
          <p>请为 "{{ selectedResource ? selectedResource.title : '' }}" 评分：</p>
          <div class="rating-stars">
            <el-rate v-model="userRating" :size="24" />
          </div>
          <el-input
            v-model="ratingComment"
            type="textarea"
            :rows="3"
            placeholder="评论（可选）"
          ></el-input>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="ratingDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitRating">提交评分</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  import { 
    Search, 
    Document, 
    Notebook, 
    PieChart, 
    VideoPlay, 
    Headset, 
    Files, 
    Download, 
    View,
    Star,
    StarFilled,
    Reading,
    DataAnalysis,
    Collection,
    VideoCamera,
    Document as DocumentIcon,
    Folder,
    Compass,
    Calendar
  } from '@element-plus/icons-vue';
  import { ElMessage } from 'element-plus';
  
  // 资源分类
  const categories = [
    { id: 1, name: '全部资源', icon: 'Folder' },
    { id: 2, name: '课程讲义', icon: 'Document' },
    { id: 3, name: '习题资料', icon: 'Notebook' },
    { id: 4, name: '视频教程', icon: 'VideoCamera' },
    { id: 5, name: '音频讲解', icon: 'Headset' },
    { id: 6, name: '电子书籍', icon: 'Reading' },
    { id: 7, name: '考试真题', icon: 'DataAnalysis' },
    { id: 8, name: '学习工具', icon: 'Collection' }
  ];
  
  // 资源格式
  const formats = [
    { value: 'pdf', label: 'PDF' },
    { value: 'doc', label: 'Word' },
    { value: 'ppt', label: 'PPT' },
    { value: 'video', label: '视频' },
    { value: 'audio', label: '音频' },
    { value: 'zip', label: '压缩包' },
    { value: 'other', label: '其他' }
  ];
  
  // 状态变量
  const currentCategory = ref('1'); // 默认选中全部资源
  const searchKeyword = ref('');
  const formatFilter = ref('');
  const sortOption = ref('recent');
  const currentPage = ref(1);
  const pageSize = ref(10);
  const resourceDetailVisible = ref(false);
  const previewVisible = ref(false);
  const ratingDialogVisible = ref(false);
  const selectedResource = ref(null);
  const resourceToPreview = ref(null);
  const userRating = ref(5);
  const ratingComment = ref('');
  
  // 模拟资源数据
  const resources = ref([
    {
      id: 1,
      title: '高中数学必修一知识点总结',
      description: '全面覆盖高中数学必修一的所有重要知识点，包括函数、三角函数、数列等内容，适合高一学生复习使用。',
      format: 'pdf',
      size: 2500000, // 2.5MB
      uploadDate: '2023-05-15',
      uploader: '数学教研组',
      downloads: 1250,
      rating: 4.8,
      ratingCount: 156,
      favorites: 320,
      category: 2,
      tags: ['高中数学', '必修一', '知识点', '复习资料']
    },
    {
      id: 2,
      title: '初中物理实验视频教程',
      description: '详细讲解初中物理各个重要实验的操作步骤和注意事项，帮助学生理解实验原理和方法。',
      format: 'video',
      size: 156000000, // 156MB
      uploadDate: '2023-06-20',
      uploader: '物理教研组',
      downloads: 890,
      rating: 4.6,
      ratingCount: 98,
      favorites: 210,
      category: 4,
      tags: ['初中物理', '实验', '视频教程']
    },
    {
      id: 3,
      title: '高考英语词汇表及例句',
      description: '包含高考英语必备的3500个核心词汇，每个词汇配有例句和中文解释，方便记忆和理解。',
      format: 'doc',
      size: 1800000, // 1.8MB
      uploadDate: '2023-04-10',
      uploader: '英语教研组',
      downloads: 2100,
      rating: 4.9,
      ratingCount: 245,
      favorites: 560,
      category: 3,
      tags: ['高考英语', '词汇', '例句']
    },
    {
      id: 4,
      title: '中考数学真题解析（2020-2023）',
      description: '收录了2020年至2023年的中考数学真题，并提供详细的解题思路和答案解析。',
      format: 'pdf',
      size: 5600000, // 5.6MB
      uploadDate: '2023-07-05',
      uploader: '中考研究中心',
      downloads: 1560,
      rating: 4.7,
      ratingCount: 178,
      favorites: 420,
      category: 7,
      tags: ['中考数学', '真题', '解析']
    },
    {
      id: 5,
      title: '化学元素周期表学习工具',
      description: '交互式化学元素周期表，点击元素可查看详细信息，包括原子量、电子排布、物理化学性质等。',
      format: 'zip',
      size: 8900000, // 8.9MB
      uploadDate: '2023-03-18',
      uploader: '化学教研组',
      downloads: 760,
      rating: 4.5,
      ratingCount: 86,
      favorites: 180,
      category: 8,
      tags: ['化学', '元素周期表', '学习工具']
    }
  ]);
  
  // 计算属性：筛选后的资源
  const filteredResources = computed(() => {
    let result = resources.value;
    
    // 按分类筛选
    if (currentCategory.value !== '1') {
      result = result.filter(item => item.category === parseInt(currentCategory.value));
    }
    
    // 按关键词搜索
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase();
      result = result.filter(item => 
        item.title.toLowerCase().includes(keyword) || 
        item.description.toLowerCase().includes(keyword) ||
        (item.tags && item.tags.some(tag => tag.toLowerCase().includes(keyword)))
      );
    }
    
    // 按格式筛选
    if (formatFilter.value) {
      result = result.filter(item => item.format === formatFilter.value);
    }
    
    // 排序
    if (sortOption.value === 'recent') {
      result = result.sort((a, b) => new Date(b.uploadDate) - new Date(a.uploadDate));
    } else if (sortOption.value === 'downloads') {
      result = result.sort((a, b) => b.downloads - a.downloads);
    } else if (sortOption.value === 'rating') {
      result = result.sort((a, b) => b.rating - a.rating);
    }
    
    return result;
  });
  
  // 计算属性：总资源数
  const totalResources = computed(() => filteredResources.value.length);
  
  // 计算属性：相关资源
  const relatedResources = computed(() => {
    if (!selectedResource.value) return [];
    
    // 根据相同分类和标签查找相关资源
    return resources.value
      .filter(item => 
        item.id !== selectedResource.value.id && 
        (item.category === selectedResource.value.category || 
         (item.tags && selectedResource.value.tags && 
          item.tags.some(tag => selectedResource.value.tags.includes(tag))))
      )
      .sort((a, b) => b.downloads - a.downloads)
      .slice(0, 3); // 最多显示3个相关资源
  });
  
  // 方法：处理分类选择
  const handleCategorySelect = (index) => {
    currentCategory.value = index;
    currentPage.value = 1;
  };
  
  // 方法：处理搜索
  const handleSearch = () => {
    currentPage.value = 1;
  };
  
  // 方法：处理页码变化
  const handlePageChange = (page) => {
    currentPage.value = page;
  };
  
  // 方法：查看资源详情
  const viewResourceDetail = (resource) => {
    selectedResource.value = resource;
    resourceDetailVisible.value = true;
  };
  
  // 方法：下载资源
  const downloadResource = (resource) => {
    ElMessage.success(`开始下载: ${resource.title}`);
    // 实际应用中这里会调用下载API
    resource.downloads++;
  };
  
  // 方法：预览资源
  const previewResource = (resource) => {
    resourceToPreview.value = resource;
    previewVisible.value = true;
  };
  
  // 方法：判断资源是否可预览
  const canPreview = (resource) => {
    return ['pdf', 'video', 'audio'].includes(resource.format);
  };
  
  // 方法：获取格式标签
  const getFormatLabel = (format) => {
    const found = formats.find(item => item.value === format);
    return found ? found.label : format.toUpperCase();
  };
  
  // 方法：格式化文件大小
  const formatFileSize = (size) => {
    if (size < 1024) {
      return size + ' B';
    } else if (size < 1024 * 1024) {
      return (size / 1024).toFixed(1) + ' KB';
    } else if (size < 1024 * 1024 * 1024) {
      return (size / (1024 * 1024)).toFixed(1) + ' MB';
    } else {
      return (size / (1024 * 1024 * 1024)).toFixed(1) + ' GB';
    }
  };
  
  // 方法：收藏资源
  const collectResource = (resource) => {
    ElMessage.success(`已收藏: ${resource.title}`);
    // 实际应用中这里会调用API进行收藏操作
    // 模拟收藏计数增加
    resource.favorites++;
  };
  
  // 方法：评分对话框
  const rateResource = () => {
    userRating.value = 5; // 默认5星
    ratingComment.value = '';
    ratingDialogVisible.value = true;
  };
  
  // 方法：提交评分
  const submitRating = () => {
    if (selectedResource.value) {
      // 实际应用中这里会调用API提交评分
      // 模拟更新评分
      const oldRating = selectedResource.value.rating;
      const oldCount = selectedResource.value.ratingCount;
      selectedResource.value.ratingCount++;
      selectedResource.value.rating = ((oldRating * oldCount) + userRating.value) / selectedResource.value.ratingCount;
      
      ElMessage.success('评分提交成功！');
      ratingDialogVisible.value = false;
    }
  };
  
  // 生命周期钩子
  onMounted(() => {
    // 实际应用中可能需要从API获取数据
  });
  </script>
  
  <style lang="scss" scoped>
  .resources-container {
    padding: 20px;
    
    .page-header {
      margin-bottom: 20px;
      
      h1 {
        margin: 0 0 10px;
        font-size: 24px;
        color: #303133;
      }
      
      p {
        margin: 0;
        color: #606266;
      }
    }
    
    .resources-content {
      display: flex;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      overflow: hidden;
      
      .resources-sidebar {
        width: 220px;
        border-right: 1px solid #ebeef5;
        display: flex;
        flex-direction: column;
        
        .sidebar-header {
          padding: 15px;
          border-bottom: 1px solid #ebeef5;
          
          h3 {
            margin: 0;
            font-size: 16px;
            color: #303133;
          }
        }
        
        .category-menu {
          border-right: none;
          flex: 1;
          
          :deep(.el-menu-item) {
            height: 50px;
            line-height: 50px;
            padding-left: 20px !important;
            
            .el-icon {
              margin-right: 10px;
            }
            
            &.is-active {
              background-color: #ecf5ff;
            }
          }
        }
      }
      
      .resources-main {
        flex: 1;
        padding: 20px;
        
        .resources-filters {
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 10px;
          background-color: #f5f7fa;
          padding: 15px;
          border-radius: 4px;
          
          .search-box {
            width: 280px;
          }
          
          .filter-options {
            display: flex;
            gap: 10px;
            
            .el-select {
              min-width: 120px;
            }
            
            @media (max-width: 768px) {
              margin-top: 10px;
              width: 100%;
              justify-content: space-between;
            }
          }
        }
        
        .resources-list {
          .resource-card {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            
            :deep(.el-card__body) {
              padding: 15px;
            }
            
            .card-main-content {
              display: flex;
              margin-bottom: 12px;
            }
            
            .resource-icon {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 60px;
              height: 60px;
              background-color: #f5f7fa;
              border-radius: 4px;
              margin-right: 15px;
              flex-shrink: 0;
              
              .el-icon {
                font-size: 24px;
                color: #409EFF;
              }
            }
            
            .resource-info {
              flex: 1;
              
              .resource-title {
                font-size: 16px;
                font-weight: 500;
                color: #303133;
                margin-bottom: 5px;
              }
              
              .resource-description {
                font-size: 14px;
                color: #606266;
                margin-bottom: 5px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              
              .resource-meta {
                font-size: 12px;
                color: #909399;
                margin-bottom: 5px;
                
                span {
                  margin-right: 10px;
                  
                  &:last-child {
                    margin-right: 0;
                  }
                }
              }
              
              .resource-stats {
                display: flex;
                justify-content: space-between;
                
                .resource-rating {
                  display: flex;
                  align-items: center;
                  
                  .rating-count {
                    margin-left: 5px;
                    font-size: 12px;
                    color: #909399;
                  }
                }
                
                .resource-downloads {
                  display: flex;
                  align-items: center;
                  font-size: 12px;
                  color: #909399;
                  
                  .el-icon {
                    margin-right: 5px;
                  }
                }
              }
            }
          }
        }
        
        .empty-resources {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 40px 0;
        }
        
        .pagination-container {
          margin-top: 20px;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
  
  .resource-detail {
    .detail-header {
      margin-bottom: 20px;
      background-color: #f5f7fa;
      padding: 15px;
      border-radius: 4px;
      
      .detail-info {
        h3 {
          margin: 0 0 10px;
          font-size: 18px;
          color: #303133;
        }
        
        .detail-meta {
          color: #909399;
          font-size: 14px;
          
          span {
            margin-right: 15px;
            display: inline-block;
            margin-bottom: 5px;
            
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
    
    .detail-description, .detail-preview, .detail-stats, .detail-tags, .detail-related {
      margin-bottom: 20px;
      
      h4 {
        margin: 0 0 10px;
        font-size: 16px;
        color: #303133;
      }
      
      p {
        margin: 0;
        color: #606266;
        line-height: 1.6;
      }
    }
    
    .detail-preview {
      .preview-container {
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;
        
        .preview-placeholder {
          height: 200px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #f5f7fa;
          color: #909399;
          
          .el-icon {
            font-size: 40px;
            margin-bottom: 10px;
          }
        }
      }
    }
    
    .detail-stats {
      display: flex;
      justify-content: space-between;
      background-color: #f5f7fa;
      padding: 15px;
      border-radius: 4px;
      
      .stats-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .stats-label {
          font-size: 14px;
          color: #909399;
          margin-bottom: 5px;
        }
        
        .stats-value {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }
        
        .stats-rating {
          display: flex;
          align-items: center;
          
          span {
            margin-left: 5px;
            color: #909399;
            font-size: 14px;
          }
        }
      }
    }
    
    .detail-tags {
      .tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
    }
    
    .detail-related {
      .related-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        
        .related-item {
          display: flex;
          align-items: center;
          padding: 10px;
          border: 1px solid #ebeef5;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 0.3s;
          
          &:hover {
            background-color: #f5f7fa;
          }
          
          .related-icon {
            font-size: 24px;
            color: #409EFF;
            margin-right: 10px;
          }
          
          .related-info {
            flex: 1;
            
            .related-title {
              font-size: 14px;
              color: #303133;
              margin-bottom: 5px;
            }
            
            .related-meta {
              font-size: 12px;
              color: #909399;
            }
          }
        }
      }
    }
    
    .detail-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      flex-wrap: wrap;
      
      .el-button {
        flex: 1;
        min-width: 120px;
        max-width: 180px;
        
        .el-icon {
          margin-right: 5px;
        }
      }
    }
  }
  
  .resource-preview-container {
    .preview-placeholder {
      height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #f5f7fa;
      color: #909399;
      border-radius: 4px;
      
      .el-icon {
        font-size: 60px;
        margin-bottom: 20px;
      }
      
      span {
        font-size: 16px;
      }
    }
  }
  
  .rating-dialog-content {
    .rating-stars {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
  }
  
  @media (max-width: 768px) {
    .resources-content {
      flex-direction: column;
      
      .resources-sidebar {
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid #ebeef5;
      }
    }
    
    .resource-card {
      .card-main-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        .resource-icon {
          margin-bottom: 10px;
          margin-right: 0;
        }
        
        .resource-info {
          width: 100%;
        }
      }
      
      .resource-actions {
        justify-content: center;
        margin-left: 0;
      }
    }
    
    .detail-stats {
      flex-direction: column;
      gap: 15px;
    }
    
    .detail-actions {
      flex-direction: column;
    }
  }
  </style>